<template>
    <div class="components-container" v-cloak>
        <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="pageWidth" v-bind:blocking="true">
            <h3>{{title}}</h3>
            <div style="margin:10px 20px">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">业务编号</label>
                        <div class="layui-input-inline">
                            <el-input ref="isfocus" v-model="crhData.REGNO" placeholder="请输入业务编号" :readonly='isINFO'>
                                <!-- <el-button slot="append" icon="el-icon-search" @click="getRegInfo" :disabled='isINFO'></el-button> -->
                            </el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品编号</label>
                        <div class="layui-input-inline">
                            <el-input ref="infocus1" v-model="crhData.BOOKNO" placeholder="请输入商品编号" @keyup.enter.native="getbookdetail" :readonly='isINFO'>
                                <el-button slot="append" icon="el-icon-search" @click="getbookdetail" :disabled='isINFO'></el-button>
                            </el-input>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <!-- <div class="layui-inline">
                        <label class="layui-form-label">逝者姓名</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGNAME" readonly></el-input>
                        </div>
                    </div> -->
                     <div class="layui-inline">
                        <label class="layui-form-label">逝者姓名</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGNAME" placeholder="请输入逝者姓名" :readonly='isINFO'></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">逝者性别</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGSEXDESC" readonly></el-input>
                            <!-- <el-select v-model="regInfo.REGSEXDESC" filterable>
                                <el-option v-for="item in xblx" :key="item.CODNAME" :label="item.CODALIAS" :value="item.CODNAME">
                                </el-option>
                            </el-select> -->
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">逝者年龄</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGAGE" readonly></el-input>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">客户姓名</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGHANDLERNAME" :readonly='isINFO'></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">接尸地址</label>
                        <div class="layui-input-inline">
                            <el-input style="width:500px;" v-model="regInfo.REGADDRESS" readonly></el-input>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">逝者备注</label>
                        <div class="layui-input-inline">
                            <el-input style="width: 800px;" v-model="regInfo.REGREMARK" :readonly='isINFO'></el-input>
                        </div>
                    </div>
                </div>
                <!-- <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">家属性名</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGHANDLERNAME" readonly></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">逝者关系</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGRELATION" readonly></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">使用人</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.DPOUSENAM" :readonly="!iscomeinfo"></el-input>
                        </div>
                    </div>
                </div> -->
            </div>
            <div id="box" :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
                <table ref="scroll" class="layui-table" style="border-spacing: 0;">
                    <thead>
                        <tr>
                            <th>费用名称</th>
                            <th>单位</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody ref='inputs'>
                        <tr ref="trscroll" class="allRow" v-for="(chl,index) in chlList">
                            <td>
                                <!-- 费用名称 -->
                                <el-input v-model="chl.DPGNAME" readonly>
                                </el-input>
                            </td>
                            <td>
                                <!-- 单位 -->
                                <el-input v-model="chl.DPGUNIT" readonly>
                                </el-input>
                            </td>
                            <td>
                                <!-- 数量 -->
                                <el-input  @keyup.native="check(index)" @keydown.enter.native="enterEvent(index)"  v-model="chl.DOLNUM" :readonly='isINFO'><!-- :disabled='isINFO' -->
                                </el-input>
                            </td>
                            <td>
                                <!-- 单价 -->
                                <el-input v-model="chl.DPGSALE" readonly></el-input> 
                            </td>
                            <td>
                                <!-- 金额 -->
                                <el-input v-model="chl.DOLMONEY" readonly></el-input>
                                <!-- {{chl.DOLMONEY}} -->
                            </td>
                            <td>
                                <button class="layui-btn layui-btn-small layui-btn-normal" @click="remove(index)" :disabled='isINFO'>
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4"></td>
                            <td>{{ mountTotal }}</td>
                            <td>
                                <!-- <button class="layui-btn layui-btn-small layui-btn-normal" @click="insert()" :disabled='isINFO'>
                                    <i class="layui-icon">&#xe654;</i>
                                </button> -->
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="layui-form-item btnCenter sweet-btn">
                <p style="position:absolute;color:red">丧葬用品总金额：{{szypnums}}  骨灰盒总金额：{{ghhnums}}</p>
                <el-button @click="closeDialog">取消</el-button>
                <el-button @click="print">打印</el-button>
                <el-button type="primary" @click="submissions()" :disabled='this.issubmit' v-if="this.title == '丧葬用品出库申请' || this.title == '丧葬用品出库修改'" :loading="this.$store.state.isloading">提交</el-button>
                <el-button type="primary" @click="godepositcost()" v-if="this.title == '丧葬用品出库申请' || this.title == '丧葬用品出库修改'" :loading="this.$store.state.isloading">骨灰去向登记</el-button>
            </div>
        </sweet-modal>
        <funeralSuppliesMain ref="dialog_yw"></funeralSuppliesMain>
        <sweet-modal ref="Print" class="dialog" :sweetModalMaxWidth="pageWidth">
            <h3>{{titles}}</h3>
            <iframe :src="printUrl" style="width:1100px; height:500px;margin-top:20px;"></iframe>
        </sweet-modal>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.el-button + .el-button {
    margin-left: 0;
}

.sweet-btn {
    margin-top: 20px;
}
</style>

<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { accMul, Subtr, accAdd } from "@/utils/operations.js";
import { ORDER } from "@/const/orderConst.js";
import funeralSuppliesMain from "./depositCostMain";

const ADD = "新增";
const INFO = "义乌详情";
const CHANGE = "修改";

export default {
    name: "hello",
    data() {
        return {
            pageWidth: 1200,
            maxHeight: 500,
            order: null,
            title: null,
            reginfoid: null,//regid
            titles: null,
            printUrl: null,
            issubmit: false,

            //收费信息
            regInfo: {
                DPOUSENAM: null,//业务编号
                REGNAME: null,//逝者姓名
                REGSEXDESC: null,//逝者性别
                REGAGE: null,//年龄
                DPGID: null,
                REGHANDLERNAME: null,
                REGADDRESS: null,
                REGREMARK: null,
                // REGADDRESS: null,//接尸地点
                // REGHANDLERNAME: null,//家属姓名
                // REGRELATION: null,//逝者关系
                // DPOUSENAM: null,//使用人
                // DPOPHONENUM: null,//联系电话
            },
            crhData: {
                REGNO: null,//业务编号
                BOOKNO: null //商品编号
            },
            //收费项目
            chlList: [],
            chl: {
                DOLDEPOSIT: null, //所属仓库
                // DOLDPGID: null,//物品类别编号
                DOLDPGID: "", //物品类别编号
                DOLIDESOK: null, //库存数量
                DOLNUM: null, //出库数量
                DOLMONEY: null //出库金额
            },
            DPOID: null,
            isINFO: true,
            xblx:[],
            ghhnums: 0,
            szypnums: 0,
            REGID: null,
            PRPID: null,
        };
    },
    methods: {
        getCode() {
        let data = {};
        apiBase.DoService(
            data,
            apiBase.getApiAdress().Registration.QueryAllCode,
            res => {
            let codeList = res.data.content;
            for (var i in codeList) {
                switch (codeList[i].CTPID) {
                    case "性别类型":
                        this.xblx = codeList[i].Cods;
                        break;
                    default:
                }
            }
            }
        );
        },
        // 按enter键，跳下一行
        enterEvent(rowNum){
            //获取所有行
            let rows = this.$refs.inputs.getElementsByClassName("allRow");
            //获取当前行
            if (rowNum == this.chlList.length - 1) return;
            let currow = rows[rowNum + 1];
            // 获取当前行所有列
            let inputs = currow.getElementsByTagName("input");
            inputs[2].select();
            let tableHeight = this.$refs.trscroll[0].scrollHeight * (rowNum + 1);
            $("#box").animate({ scrollTop: tableHeight }, 500);
        },
        //删除行
        remove(index) {
            this.chlList.splice(index, 1);
            this.nums(this.chlList);
        },
        //出库时候的提交
        submissions() {
            this.$confirm("确认是否提交该数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(callback => {
                    let chlList = JSON.parse(JSON.stringify(this.chlList));
                    chlList.forEach(item => {
                        item.DOLDPGID = item.DPGID;
                        item.DOLMONEY = item.DOLMONEY;
                        item.REGREMARK = item.REGREMARK;             
                    });
                    // if(chlList.length != 0){
                        apiBase.DoService(
                        {
                            DPOREGID: this.reginfoid,
                            DPOID: this.DPOID,
                            REGHANDLERNAME: this.regInfo.REGHANDLERNAME,
                            REGREMARK: this.regInfo.REGREMARK,
                            DPOREGID: this.REGID?this.REGID:this.PRPID,
                            list_Dol: chlList,
                        },
                        apiBase.getApiAdress().Depot.CreateFuneralDpo,  
                        res => {
                                this.$message({
                                    type: "success",
                                    message: "丧葬用品出库成功!"
                                });
                                this.issubmit = true;
                                this.DPOID = res.data.content.DPOID;
                                // this.closeDialog();
                                this.refreshData();
                            }
                        );
                    // }else{
                    //     this.$message({
                    //         type: "error",
                    //         message: "未添加商品!"
                    //     });
                    // }
                    
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
            // this.refreshData();
        },
        godepositcost(){
            this.$refs.dialog_yw.open('修改', this.crhData.REGNO);
        },
        datareapet(){
            Object.assign(this.$data.regInfo,this.$options.data().regInfo);
            this.crhData.REGNO = null;
            this.crhData.BOOKNO = null;
            this.reginfoid = null;
            this.regInfo.REGREMARK = null;
        },
        print(){
            this.titles = '打印逝者信息';
            let data = {
                REGID:this.reginfoid
            };
            apiBase.DoService(
            data, 
            apiBase.getApiAdress().Pdf.PrintRegDetail,
            res => {
                this.printUrl = res.data.content.PDFNAME;
                this.$refs.Print.open();
            });
        },
        //打开弹出框
        open(order, id, dopid,regid,prpid) {
            this.order = order;
            this.DPOID = dopid;
            this.REGID = regid;
            this.PRPID = prpid;
            this.ghhnums = 0;
            this.szypnums = 0;
            this.issubmit = false;
            switch (this.order) {
                case ADD:
                    this.title = "丧葬用品出库申请";
                    this.chlList = [];
                    this.isINFO = false;
                    this.datareapet();
                    this.$refs.dialog.open();
                    setTimeout(() => {
                        this.$refs.isfocus.focus();
                    }, 100);
                    break;
                case INFO:
                    this.title = "丧葬用品出库详情";
                    this.chlList = [];
                    this.crhData.REGNO = id;
                    this.isINFO = true;
                    setTimeout(() => {
                        this.getinfo();
                    }, 100);
                    this.$refs.dialog.open();
                    break;
                case CHANGE:
                    this.title = "丧葬用品出库修改";
                    this.chlList = [];
                    this.crhData.REGNO = id;
                    this.isINFO = false;
                    setTimeout(() => {
                        this.getinfo();
                    }, 100);
                    this.$refs.dialog.open();
                    break;
                default:
            }
        },
        datareapets(){
            Object.assign(this.$data.regInfo,this.$options.data().regInfo);
            this.crhData.BOOKNO = null;
            this.reginfoid = null;
            this.regInfo.REGREMARK = null;
            this.chlList = [];
        },
        //根据正式业务编号获取ID
        // getRegInfo() {
        //     this.datareapets();
        //     let data = {
        //         REGBUSNUM: this.crhData.REGNO,
        //         REGNAME: this.regInfo.REGNAME,
        //     };
        //     apiBase.DoService(
        //         data,
        //         apiBase.getApiAdress().Registration.GetRegistrationFuneralByNo,
        //         res => {
        //             this.$refs.infocus1.focus();
        //             let reg = res.data.content;
        //             if (!reg) {
        //                 this.$message({
        //                     type: "error",
        //                     message: "未找到逝者信息!"
        //                 });
        //                 Object.assign(
        //                     this.$data.regList,
        //                     this.$options.data().regList
        //                 );
        //                 return;
        //             }
        //             this.chlList = res.data.content.List_DOL;
        //             if(this.chlList.length > 0){
        //                 this.chlList.forEach(item => {
        //                     item.DPGID = item.DOLDPGID;
        //                 });
        //             }
        //             this.crhData.REGNO = res.data.content.REGNO;
        //             this.regInfo = res.data.content;
        //             this.reginfoid = res.data.content.REGID;
        //             this.regInfo.DPOUSENAM = res.data.content.REGHANDLERNAME;
        //         }
        //     );
        // },
       getinfo(){
           let data = {
                DPOREGID: this.REGID?this.REGID:this.PRPID
            };
            apiBase.DoService(
                data,
                apiBase.getApiAdress().Depot.DetailFuneralDpo,   
                res => {
                    this.$refs.infocus1.focus();
                    let reg = res.data.content;
                    if (!reg) {
                        this.$message({
                            type: "error",
                            message: "未找到逝者信息!"
                        });
                        Object.assign(
                            this.$data.regList,
                            this.$options.data().regList
                        );
                        return;
                    };
                    if(res.data.content.List_DOL == null){
                        this.chlList = [];
                    }else{
                        this.chlList = res.data.content.List_DOL;
                    }
                    
                    this.nums(this.chlList);
                    this.regInfo = res.data.content;   
                    this.reginfoid = res.data.content.REGID;
                    this.regInfo.DPOUSENAM = res.data.content.REGHANDLERNAME;

                    this.regInfo.REGNAME = res.data.content.REGNAME;
                    this.regInfo.REGSEXDESC = res.data.content.REGSEXDESC;
                    this.regInfo.REGAGE = res.data.content.REGAGE;
                    this.regInfo.REGHANDLERNAME = res.data.content.REGHANDLERNAME;
                    this.regInfo.REGADDRESS = res.data.content.REGADDRESS;
                    this.regInfo.REGREMARK = res.data.content.REGREMARK;

                    this.DPOID = res.data.content.DPOID;

                }
            );
       },
        // 根据商品编号获取商品信息
        getbookdetail(){
            let data = {
                DPGBAINUM: this.crhData.BOOKNO,
            };
            apiBase.DoService(
                data,
                apiBase.getApiAdress().Depot.FuneralDPGDetail,
                res => {
                    let reg = res.data.content;
                    reg.DOLNUM = 1;
                    reg.DOLMONEY = reg.DPGSALE;
                    if (!reg) {
                        this.$message({
                            type: "error",
                            message: "未找到商品信息!"
                        });
                        Object.assign(
                            this.$data.regList,
                            this.$options.data().regList
                        );
                        return;
                    }else{
                        if(reg.SOKUSABLENUM < 1){
                             this.$message({
                                type: "error",
                                message: "商品库存不足"
                            });
                        }
                    }
                    this.crhData.BOOKNO = null;
                    this.chlList.push(reg);
                    this.nums(this.chlList);
                    let tableHeight = this.$refs.scroll.scrollHeight;
                    $("#box").animate({scrollTop:tableHeight},500);
                }
            );
        },
        nums(val){
            let ghhnum = 0;
            let szypnum = 0;
            if(val.length > 0){
                val.forEach(item => {
                    // item.DPGID = item.DOLDPGID;
                    if(item.CYPNAME == '骨灰盒'){
                        ghhnum = ghhnum + Number(item.DOLMONEY);
                    }
                    if(item.CYPNAME == '丧葬用品'){
                        szypnum = szypnum + Number(item.DOLMONEY);
                    }
                });
            }
            this.ghhnums = ghhnum;
            this.szypnums = szypnum;
        },
        check(index) {
            let chls = this.chlList[index];
            if(chls.DOLNUM > chls.SOKUSABLENUM){
                this.$message({
                    type: "error",
                    message: "商品库存不足"
                });
            }
            chls.DOLMONEY = accMul(Number(chls.DOLNUM),Number(chls.DPGSALE));
            this.nums(this.chlList);
        },
        //只能输入正整数
        checkNumber(value) {
            value = value.replace(/\D/g, "").replace(/^0+(?=\d)/, "");
            if (value !== "") {
                if (value.substr(0, 1) === "0" && value.length === 2) {
                    value = value.substr(1, value.length);
                }
            } else {
                value = 0;
            }
            return value;
        },
        //只能输入金额
        checkMoney(value) {
            //修复第一个字符是小数点 的情况.
            if (value !== "" && value.substr(0, 1) === ".") {
                value = "";
            }
            value = value.replace(/^0*(0\.|[1-9])/, "$1"); //解决 粘贴不生效
            value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
            value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            value = value
                .replace(".", "$#$")
                .replace(/\./g, "")
                .replace("$#$", ".");
            value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
            if (value.indexOf(".") < 0 && value !== "") {
                //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                if (value.substr(0, 1) === "0" && value.length === 2) {
                    value = value.substr(1, value.length);
                }
            } else if (value === "") {
                value = 0;
            }
            return value;
        },
        closeDialog() {
            switch (this.order) {
                case ADD:
                case INFO:
                case CHANGE:
                    this.$refs.dialog.close();
                    break;
                default:
                    break;
            }
        },
        refreshData() {
            this.$emit("refreshData");
        },
    },
    created() {
       this.getCode()
    },
    //计算属性
    computed: {
        mountTotal() {
            let total = 0;
            for (let chl of this.chlList) {
                total = accAdd(total, chl.DOLMONEY);
            }
            return total;
        },
    },

    watch: {
       
    },
    mounted() {
       
    },
    components: {
        sweetModal,
        funeralSuppliesMain
    }
};
</script>
